<template>
	<view class="content">
		<view class="user-profile">
			<image :src="avatar" mode="aspectFit"></image>
			<template v-if="nickname">
				<view class="">
					<text class="user-name">{{ nickname }}</text>
					<!-- <text class="gender">{{ formatUserGender() }}</text> -->
				</view>
			</template>
			<button @tap="userLogin" class="login-btn" v-else>点击登录</button>
		</view>

		<Tab text="创作管理" class="tab-item" @tap="toManageCenter"></Tab>
		<Tab text="消息中心" class="tab-item" @tap="toMessageCenter"></Tab>
		<Tab text="我赞过的" class="tab-item" @tap="likeList"></Tab>
		<Tab text="阅读过的文章" class="tab-item" @tap="readHistory"></Tab>
		<Tab text="设置" class="tab-item" @tap="personalSetting"></Tab>
		<Tab text="关于" class="tab-item" @tap="about"></Tab>
	</view>
</template>

<script>
	import {
		request
	} from '../../utils/request.js'
	import {
		userLogin,
		getSessionKey
	} from '../../api.js'

	import Tab from '../../components/Tab.vue'
	export default {
		data() {
			return {
				nickname: '',
				avatar: '../../static/images/default_avatar.jpeg',
				gender: 0
			}
		},
		components: {
			Tab
		},
		onShow() {
			let userInfo = getApp().globalData

			if (userInfo.isLogin) {
				this.nickname = userInfo.nickname
				this.avatar = userInfo.avatar
				this.gender = userInfo.gender || 0

				console.log(this.nickname)
			}
		},
		onLoad() {},
		methods: {
			formatUserGender() {
				return ['', '男', '女'][this.gender]
			},
			login(){
				return new Promise((resolve, reject)=>{
					uni.login({
						success: async (res) => {
							if (res.code) {
								let code = res.code
								let ret = await request(getSessionKey, {
									code
								})
								console.log(ret)
								if (ret.code) {
									uni.showToast({
										icon: 'none',
										text: '网络错误，请稍后重试',
									})
								}
								resolve(ret.data)
							}
						},
					})
				})
			},
			getUserProfile() {
				return new Promise((resolve, reject)=>{
					uni.getUserProfile({
						desc: '完善用户基本信息',
						success: (res) => {
							console.log('getUserProfile success')
							resolve(res)
						},
						fail: (err) => {
							console.log('err',err)
						}
					})
				})
			},
			userLogin() {
				Promise.all([this.login(), this.getUserProfile()]).then(async ([loginInfo, res]) =>{
					let { openid, session_key } = loginInfo
					console.log('promise all',loginInfo, res)
					let {
						nickName,
						avatarUrl,
						gender
					} = res.userInfo
					this.nickname = nickName
					this.avatar = avatarUrl
					this.gender = gender
					
					
					let userInfo = await request(userLogin, {
						session_key,
						encryptedData: res.encryptedData,
						iv: res.iv
					}, 'post')
					
					console.log('=== success', userInfo)
					
					if (openid) {										
						getApp().globalData.isLogin = true
						getApp().globalData.nickname = nickName
						getApp().globalData.avatar = avatarUrl
						getApp().globalData.gender = gender
						getApp().globalData.openid = openid
										
						uni.setStorageSync('user_info', getApp().globalData) 
					}
				})
			},
			toManageCenter() {
				console.log(getApp().globalData.isLogin)
				if (!getApp().globalData.isLogin) {
					this.getUserProfile()
					return
				}
				console.log('toManageCenter')
				uni.navigateTo({
					url: '../manage/manage'
				})
			},
			toMessageCenter() {
				console.log(getApp().globalData.isLogin)
				if (!getApp().globalData.isLogin) {
					this.getUserProfile()
					return
				}
				console.log('toMessageCenter')
			},
			likeList() {
				if (!getApp().globalData.isLogin) {
					this.getUserProfile()
					return
				}
				console.log('likeList')
			},
			readHistory() {
				if (!getApp().globalData.isLogin) {
					this.getUserProfile()
					return
				}
				console.log('readHistory')
			},
			personalSetting() {
				if (!getApp().globalData.isLogin) {
					this.getUserProfile()
					return
				}
				console.log('personalSetting')
			},
			about() {
				uni.navigateTo({
					url: '../about/about'
				})
			}
		}
	}
</script>

<style>
	.user-profile {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.user-profile image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
	}

	.gender {
		font-size: .8em;
		color: #8891ab;
		margin-left: 1em;
	}

	.login-btn {
		width: 360rpx;
		height: 80rpx;
		margin: auto;
		line-height: 80rpx;
		color: #8891ab;
		background-color: transparent;
		border: 0;
	}
</style>
